<template>
  <div>
    <el-dialog :title="formitem.id?'编辑部门':'新值部门'" :visible="isshow" @close="cancel">

      <el-form ref="add" :model="formitem" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="formitem.name" style="width:80%" placeholder="1-50个字符" /></el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="formitem.code" style="width:80%" placeholder="1-50个字符" /></el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="formitem.manager" style="width:80%" placeholder="请选择" @focus="getplos" @blur="chgesss">
            <el-option v-for="item in plolist" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="formitem.introduce" style="width:80%" placeholder="1-300个字符" /></el-form-item>
      </el-form>
      <template #footer>
        <el-row :span="6">
          <el-button type="primary" size="small" @click="ok">
            确定
          </el-button>
          <el-button size="small" @click="cancel">
            取消
          </el-button>
        </el-row>
      </template>

    </el-dialog>
  </div>
</template>
<script>
import { prople, addDepartment, getdeta, updeta } from '@/api/comproy.js'
import { getplo } from '@/api/employees'
export default {
  props: {
    nodeDate: {
      type: Object,
      required: true
    },
    isshow: {
      type: Boolean,
      required: true
    }
  },
  data() {
    const cheag = async(rule, value, callback) => {
      console.log(value)
      let isRepeat = false
      const res = (await prople()).depts
      console.log(res)
      if (this.formitem.id) {
        isRepeat = res
          .filter(v => v.pid === this.nodeDate.pid)
          .some(v => v.name === value && v.id !== this.nodeDate.id)
      } else {
        isRepeat = res
          .filter(v => v.pid === this.nodeDate.id)
          .some(v => v.name === value)
      }

      if (isRepeat) {
        callback(new Error('同一部门不能同名'))
      } else {
        callback()
      }
    }
    const cheags = async(a, b, c) => {
      let iserr = false
      const { depts } = await prople()
      iserr = depts.some(v => v.code === b && v.code !== this.nodeDate.code)
      if (iserr) {
        c(Error('该编码已存在'))
      } else {
        c()
      }
    }
    return {
      plolist: [],
      formitem: {
        code: '',
        introduce: '',
        manager: '',
        name: ''

      },
      rules: {
        code: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 50, message: '最多50个字符', trigger: 'blur' }, { trigger: 'blur', validator: cheags }],
        introduce: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 50, message: '最多300个字符', trigger: 'blur' }],
        manager: [{ required: true, message: '不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 50, message: '最多50个字符', trigger: 'blur' }, { trigger: 'blur', validator: cheag }]
      }
    }
  },

  methods: {
    chgesss() {
      setTimeout(() => {
        this.$refs.add.validateField('manager')
      }, 50)
    },
    async getplos() {
      this.plolist = await getplo()
      console.log(this.plolist)
    },
    async ok() {
      if (this.formitem.id) {
        await updeta(this.formitem)
        this.$message.success('编辑成功')
      } else {
        this.$refs.add.validate()
        await addDepartment({ ...this.formitem, pid: this.nodeDate.id })
        this.$message.success('添加成功')
      }

      this.$emit('addok')
    },
    cancel() {
      this.formitem = {}
      this.$refs.add.resetFields()
      this.$emit('update:isshow', false)
    },
    async getdeta(id) {
      this.formitem = await getdeta(id)
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>
